---
title: 'tutee.id'
description: 'This website is made for tutee.id startup that meets tutors from universities with customers.'
category: 'Team of 4'
publishedAt: '2021-01-30'
techs: 'react,redux,firebase'
banner: 'tc-tutee-id_rl5i6j.png'
---

> ## Short Explanation

Tutee.id (Now Aksel.co.id) is a startup that meets tutors and its customer. This app was created to facilitate booking orders. On this site, there are pages to look at the available tutors, book them, and see the booking status.

> ## Project Goals

This project objective is to support the main business of the startup
which is to facilitate transactions and provide information about
tutors.

<blockquote className='with-icons'>
  ## Tech Stack Used
  <div className='not-prose mt-2'>
    <TechIcons techs={['react', 'redux', 'firebase']} />
  </div>
</blockquote>

This project was made using React, Redux, and Firebase. This project
was needed rapidly so building a backend application will take too
much time. So we use firebase for the backend using Firestore and
Firebase Storage to store profile pictures. I am responsible for
making the landing page, search tutor page, and session page.

<SplitImage>
  <Split>
    <CloudinaryImg
      className='!mb-0'
      mdx
      publicId='theodorusclarence/tutee-id/tutee-1_jhx3st'
      alt='tutee-1'
      width={800}
      height={2709}
    />
  </Split>
  <Split>
    <CloudinaryImg
      className='!mb-0'
      mdx
      publicId='theodorusclarence/tutee-id/tutee-2_dvybsa'
      alt='tutee-2'
      width={800}
      height={1001}
    />
    <CloudinaryImg
      mdx
      publicId='theodorusclarence/tutee-id/tutee-3_ikgyzz'
      alt='tutee-3'
      width={800}
      height={1067}
    />
    <CloudinaryImg
      mdx
      publicId='theodorusclarence/tutee-id/tutee-4_wxgcnh'
      alt='tutee-4'
      width={800}
      height={442}
    />
  </Split>
</SplitImage>

<CloudinaryImg
  mdx
  publicId='theodorusclarence/tutee-id/gif1_adhmgj'
  alt='gif1'
  width={640}
  height={355}
/>

<CloudinaryImg
  mdx
  publicId='theodorusclarence/tutee-id/gif2_xnzoel'
  alt='gif2'
  width={640}
  height={355}
/>

> ## Spotlight

### First Collaborative Project

This is my very first collaborative project with 3 other people and I
really enjoyed it. I learned a lot about git workflow to merge code
and other stuff for contributing. I actually learned how to close vim
in this project 😂. I enjoyed working in a group because I get a lot
of knowledge and get a chance to share mine too.

### Complex Project

This is quite a complex project with a lot of entities and database
optimization because we are using firebase and trying to minimize hit
as much as possible.

> ## The Problems and How I Deal With It

In this project, there are a lot of problems that I found. This is my
first time working with a complex data flow using Redux. I have a
significant time googling on the internet on how to do things. I also
make use of useEffect hooks to preprocess the data that was fetched.

Also, folder management and CSS reusability are really hard for me in
doing this collaborative project because we didn't use any CSS
framework or prepared utility classes. I think there is a lot of
redundancy in the CSS and can be fixed

> ## Lessons Learned

I learned a lot from this project. I solidified my knowledge in using
useEffect, and get a chance to put my CSS skills to practice. I work
mostly on the more complex page to build CSS-wise, and I finally put a
lot of CSS properties like absolute, sticky, overflow in this project.
Creating the navbar is also challenging because I want to use
position: sticky, and it doesn't allow it to have overflow property.

I learned great practice on managing version control with gitlab, by
using staging and production branches. This is a great and fun first
project, that really strengthen my skill
